<template>
    <!-- The `local-transition` for animation-fired that is toggled `slide-up` class. -->
    <div class="content local-transition" :class="{ 'slide-up': !isShowHeader }">
      <div
        class="menubar"
        :class="!toggleBar && afterScrollTop > 300 ? 'scroll' : ''"
      >
        <div class="logo">
          <span class="logotitle" @click="$router.push('/home/about')">{{
            store.state.centerData[0] && store.state.centerData[0].uname
          }}</span>
        </div>
        <ul :class="toggleBar ? 'active' : ''" @click="toggleBar = false">
          <NavAvatar></NavAvatar>
          <nav-item
            v-for="(item, index) in navItemList"
            :key="item.title"
            :iconClass="item.iconClass"
            :class="!index ? 'searchMax' : ''"
            @click="handleChangeRouter(item)"
          >
            {{ item.title }}
          </nav-item>

          <!--  // { title: '登录', iconClass: 'fa-user-circle-o', path: '/login' }, -->
          <NavItem iconClass="fa-user-circle-o" @click="router.push('/login')">
            {{
              store.state.userBase.username
                ? store.state.userBase.username
                : '登录'
            }}
          </NavItem>
        </ul>
        <div class="search-Min" @click="router.push('/home/search')">
          <span class="icon">
            <i class="fa fa-search" aria-hidden="true"></i>
          </span>
        </div>
        <div id="toggleBar" class="bar" @click="toggleBar = !toggleBar"></div>
      </div>
    </div>
</template>
<script lang="ts" setup>
import '@/css/navbar.min.css' // 引入样式
import { inject, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
// 这个是监视页面滚动执行显示隐藏
import scrollFn from '@/hooks/nav/navBar'
// 导航栏数据
import navItemList from '@/hooks/nav/navData'
// 导入navitem组件
const NavItem = defineAsyncComponent(() => import('../navbar/NavItem.vue'))
// 导入navAvatatr 组件
const NavAvatar = defineAsyncComponent(
  () => import('@/components/navbar/NavAvatatr.vue')
)

// 这个是监视页面滚动的返回页面 需要的值
let { toggleBar, isShowHeader, afterScrollTop } = scrollFn()

// 引入全局状态
const store: any = inject('store')

store.GetCenterData()

// 路由跳转
type navItem = {
  title: string
  iconClass: string
  path: string
}
const router = useRouter()
// 路由跳转
const handleChangeRouter = (item: navItem) => {
  if (item.path === router.currentRoute.value.path) return
  router.push(item.path)
}
</script>

<style scoped lang="scss">
@media (max-width: 760px) {
  .logotitle {
    font-size: 16px;
    cursor: auto;
  }

  .search-Min {
    margin-right: 20px;
    cursor: auto;
  }

  .menubar li {
    cursor: auto !important;
  }

  #toggleBar {
    cursor: auto;
  }

}

.slide-up .menubar{
  transform: translateY(-100%);
}

.local-transition .menubar {
  transition: transform .3s,
    background .7s,
    color .7s;
}
</style>
